<template>
	<div class="bettingRecord_page">
		<van-nav-bar :title="$t('betting.navTitle')" placeholder left-arrow @click-left="onClickLeft" safe-area-inset-top
			:border="false" fixed placeholder />
		<div class="page_cont">
			<div class="sw_but_box">
				<el-button :class="{active: type == 0}" @click="handleType(0)">{{$t('betting.ongoing')}}</el-button>
				<el-button :class="{active: type == 1}" @click="handleType(1)">{{$t('betting.closed')}}</el-button>
			</div>
			<van-empty class="custom-image" image-size="100" :image="require('@/assets/images/home/NoBet.png')"
				:description="$t('betting.noBet')" v-if="type == 1 ? list2 && list2.length <= 0 : list && list.length <= 0" />
			<van-list v-model="loading" :finished="finished" :finished-text="$t('betting.noBet')" loading-text="loading"
				error-text="error" @load="onLoad" v-else>
				<div class="list_item" v-for="(item,index) in type == 1 ? list2 : list" @click="handleItem(item)">
					<div class="name_box">
						<div class="name">
							<div class="img_box">
								<img src="@/assets/images/home/BTC.png" />
								<img src="@/assets/images/home/usdt.png" />
							</div>
							{{item.symbol_name || 'BTC/USDT'}}
						</div>
						<div class="time_box">
							<div class="time" v-if="type == 0">
								00:{{item.remain_milli_seconds >= 10 ? item.remain_milli_seconds : `0${item.remain_milli_seconds}`}}
								<div style="width: 60px; margin-left: auto; margin-top: 3px;">
									<el-progress :percentage="(item.remain_milli_seconds / 15) * 100" :show-text="false" :stroke-width="3"
										color="#137EFE" define-back-color="#202D5C"></el-progress>
								</div>
							</div>
							<div class="time_text">
								{{item.handled_at}}
							</div>
						</div>
					</div>
					<div class="usdt_box">
						<div class="u_box" :style="`color: ${item.type == 1 ? '#2ECC71' : '#FF5449'}`">
							<img
								:src="item.type == 1 ?require('@/assets/images/home/zhang.png') : require('@/assets/images/home/die.png')" />
							{{item.amount}} USDT
						</div>
						<div class="add_box">
							<div class="add" :style="type != 0 && item.profit > 0 ? 'color: #2ECC71' : ''">
								<i class="el-icon-circle-plus"></i>
								{{type == 0 ? '0' : item.profit || '0'}}
							</div>
						</div>
					</div>
				</div>
			</van-list>
		</div>
		<van-popup v-model="hasInfo">
			<div class="info_box">
				<div class="title_box">
					<div class="coin_box">
						<div class="img_box">
							<img src="@/assets/images/home/BTC.png" />
							<img src="@/assets/images/home/usdt.png" />
						</div>
						BTC/USD
					</div>
					<img src="@/assets/images/home/close.png" class="close" @click="handleClose()" />
				</div>
				<div class="info_item">
					{{$t('home.open')}}
					<div class="info">
						<img
							:src="details.type == 1 ?require('@/assets/images/home/zhang.png') : require('@/assets/images/home/die.png')" />
						{{details.open_price}}
					</div>
				</div>
				<div class="info_item" v-if="type == 1">
					{{$t('home.close')}}
					<div class="info">
						{{details.end_price}}
					</div>
				</div>
				<div class="info_item">
					{{$t('home.yield')}}
					<div class="info">
						{{details.profit_ratio}}%
					</div>
				</div>
				<div class="info_item">
					ID
					<div class="info">
						{{type == 1 ? details.account : userInfo.uid}}
					</div>
				</div>
				<div class="info_item" v-if="type == 1">
					{{details.complete_at?.split(' ')[0]}}
					<div class="info">
						{{details.created_at?.split(' ')[1]}} - {{details.complete_at?.split(' ')[1]}}
					</div>
				</div>
				<div class="info_item">
					{{$t('home.amount')}}
					<div class="info">
						{{details.amount}} USDT
					</div>
				</div>
				<div class="info_item">
					{{$t('home.profit')}}
					<div class="info" :style="type == 1 ? details.type == 1 ? 'color: #2ECC71' : 'color: #FF5449' : ''">
						{{details.profit || 0}} USDT
					</div>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import {
		microtradeLists
	} from '@/api/home'
	export default {
		props: {},
		components: {},
		data() {
			return {
				type: 0,
				page: 0,
				loading: false,
				finished: false,
				hasInfo: false,
				details: {},
				list: [],
				list2: [],
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
			matches() {
				return this.$store.state.matches
			},
			newMyDownOrder() {
				return this.$store.state.newMyDownOrder
			},
			timeDown() {
				return this.$store.state.timeDown
			}
		},
		watch: {
			timeDown(val, oldVal) {
				// console.log('val', val);
				if (this.list && this.list.length > 0) {
					this.list.map((item, index) => {
						if (item.remain_milli_seconds <= 0) {
							this.$nextTick(() => {
								// console.log('删除');
								this.list.splice(index, 1)
							})
							if (this.type == 1) {
								this.page = 1
								this.getList()
							}
							// this.$store.commit('closeMyOrderDom', item)
						}
					})
					// console.log('this.list::', this.list);
				}
			},
			newMyDownOrder(val) {
				// console.log('val', val);
				if (val && val.uid) {
					if (this.list.find(i => i.uid != val.uid)) {
						this.list.push(val)
						this.finished = true;
						this.loading = false;
					}
				}
			},
		},
		mounted() {
			if (this.newMyDownOrder && this.newMyDownOrder.remain_milli_seconds > 0) {
				this.list.push(this.newMyDownOrder)
				this.finished = true;
				this.loading = false;
			}
			// console.log('userInfo', this.userInfo);
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1)
			},
			handleType(type) {
				this.type = type
				this.page = 1;
				this.finished = false;
				this.getList()
			},
			onLoad() {
				if (!this.finished && this.type == 1) {
					this.page++
					this.getList()
				}
			},
			async getList() {
				// console.log('请求');
				this.loading = true
				const res = await microtradeLists({
					match_id: this.matches.id,
					// status: this.type == 0 ? 1 : 3,
					is_public: 0, // 是否是公共 1是 0当前用户
					status: 3,
					limit: 20,
					page: this.page,
				}).catch(err => this.loading = false)
				// console.log('res', res, );
				if (res && res.code == 1) {
					if (this.page == 1) {
						this.list2 = res.data.data
					} else {
						this.list2 = this.list2.concat(res.data.data)
					}
					if (this.list2.length >= res.data.total) {
						this.finished = true
					}
				}
				this.loading = false
			},
			handleItem(item) {
				this.details = item
				this.hasInfo = true
			},
			handleClose() {
				this.hasInfo = false
			}
		}
	}
</script>

<style scoped lang="less">
	.bettingRecord_page {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 100%;
		background-color: #161D26;
		overflow-y: auto;

		::v-deep .van-nav-bar {
			background-color: #1B232E;
			z-index: 9;

			.van-icon {
				color: #fff;
				font-size: 18px;
			}

			.van-nav-bar__title {
				color: #fff;
			}
		}

		.page_cont {
			padding: 25px 15px 5px;
		}

		.sw_but_box {
			display: flex;
			align-items: center;
			margin-bottom: 17px;

			.el-button {
				width: 48%;
				background-color: transparent;
				border-radius: 20px;
				border: 0;
				color: #A1A6A9;

				&.active {
					background-color: #212A36;
					color: #fff;
				}
			}

			.el-button+.el-button {
				margin-left: 2%;
			}
		}

		.list_item {
			padding: 14px;
			margin-bottom: 14px;
			border-radius: 10px;
			background-color: #1D2630;

			.name_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30px;

				.name {
					display: flex;
					align-items: center;
					font-size: 12px;
				}

				.img_box {
					display: flex;

					img {
						position: relative;
						z-index: 2;
						width: 20px;
						border-radius: 50%;
					}

					img+img {
						margin-left: -10px;
						z-index: 1;
						margin-right: 5px;
					}
				}

			}

			.usdt_box {
				display: flex;
				justify-content: space-between;

				.u_box {
					display: flex;
					align-items: center;
					font-size: 12px;
					color: #2ECC71;

					img {
						width: 10px;
						margin-right: 7px;
					}
				}

				.add_box {
					color: #A4A8AB;
					font-size: 12px;
				}
			}

			.time_box {
				.time_text {
					text-align: right;
					font-size: 12px;
					color: #A4A8AB;
				}

				.time {
					text-align: right;
					font-size: 12px;
				}
			}
		}

		::v-deep .van-popup {
			background-color: #212A36;
			border-radius: 10px;
			padding: 15px;
			width: 300px;

			.title_box {
				border-bottom: 1px solid #353F4C;
				margin-bottom: 20px;
				padding: 0 0 15px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.coin_box {
					display: flex;
					align-items: center;
					font-size: 12px;

					.img_box {
						display: flex;

						img {
							position: relative;
							z-index: 2;
							width: 20px;
							border-radius: 50%;
						}

						img+img {
							margin-left: -10px;
							z-index: 1;
							margin-right: 5px;
						}
					}
				}

				.close {
					width: 20px;
				}
			}

			.info_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #A4A8AB;
				margin-bottom: 15px;

				.info {
					color: #fff;

					img {
						width: 10px;
						margin-right: 5px;
					}
				}
			}

			.info_item:last-of-type {
				margin-bottom: 0;
			}
		}
	}
</style>